<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>欢太官网</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"
    />
    <!-- Link Swiper's CSS -->
    <link rel="shortcut icon" type="image/x-icon" href="//image.oppo.com/content/dam/heytap-brand/assets/favicon.ico">
    <link rel="stylesheet" href="../css/客户服务.css" />
    <link rel="stylesheet" href="../css/客户服务1.css" />

    <!-- Demo styles -->
    <style>
      html,
      body {
        position: relative;
        height: 100%;
      }

      body {
        /* font-family: Helvetica Neue, Helvetica, Arial, sans-serif; */
        font-size: 14px;
        color: #000;
        margin: 0;
        padding: 0;
      }

      .swiper {
        width: 100%;
        height: 100%;
      }

      .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
      }

      /*       .swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      } */
      .swiper {
        width: 100%;
        height: 300px;
        margin-left: auto;
        margin-right: auto;
      }

      .swiper-slide {
        background-size: cover;
        background-position: center;
      }

      .mySwiper2 {
        height: 80%;
        width: 100%;
      }
      .mySwiper2 .swiper-slide {
        height: 500px;
        display: flex;
        flex-direction: column;
      }
      .mySwiper2 .swiper-slide a {
          display: block;
        width: 800px;
        height: 100px;
        line-height: 100px;
        display: flex;
        justify-content: space-between;
        border-top: 0.5px solid #cecece;
        cursor: pointer;
      }
      .mySwiper2 .swiper-slide a:last-child {
        border-bottom: 0.5px solid #cecece;
      }
      .mySwiper2 .swiper-slide a img {
        width: 10px;
        height: 10px;
        margin-top: 45px;
      }
      .mySwiper {
        height: 20%;
        box-sizing: border-box;
        padding: 10px 0;
      }

      .mySwiper .swiper-slide {
        width: 150px;
        height: 100%;
        opacity: 0.4;
        cursor: pointer;
      }

      .mySwiper .swiper-slide-thumb-active {
        opacity: 1;
      }

      /*       .swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      } */
    </style>
  </head>

  <body>
    <nav>
      <a href="首页.html"
        ><img
          src="https://image.oppo.com/content/dam/heytap-brand/assets/svg/logo.svg"
          alt=""
      /></a>
      
      <ul>
        <li><a href="首页.html">首页</a></li>
        <li>
          <a href="品牌介绍.html">品牌介绍</a>
        </li>
        <li><a href="业务体系.html">业务体系</a></li>
        <li><a href="" style="color: black; font-weight: bold">客户服务</a></li>
        <li><a href="">中文</a></li>
      </ul>
    </nav>
    <div class="kb" style="width: 100%; height: 80px"></div>
    <section>
      <h1>让每个人因万物互融</h1>
      <h1>而享有无微不至的服务</h1>
      <input type="text" name="" id="" placeholder="请输入您的问题" />
    </section>
    <!-- Swiper -->
    <div thumbsSlider="" class="swiper mySwiper" style="width: 1000px">
      <div class="swiper-wrapper">
        <div class="swiper-slide">欢太账号</div>
        <div class="swiper-slide">云服务</div>
        <div class="swiper-slide">积分商城</div>
        <div class="swiper-slide">游戏</div>
        <div class="swiper-slide">欢太金融</div>
        <div class="swiper-slide">钱包</div>
      </div>
    </div>
    <div
      style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff"
      class="swiper mySwiper2"
    >
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <a href="二级菜单.html" style="margin: 0">
            忘记账号密码的解决办法
            <img
              src="https://image.oppo.com/content/dam/heytap-brand/assets/service/arrow.png"
              alt=""
            />
          </a>
          <a href="二级菜单.html" style="margin: 0">
            忘记账号的解决方法
            <img
              src="https://image.oppo.com/content/dam/heytap-brand/assets/service/arrow.png"
              alt=""
            />
          </a>
          <a href="二级菜单.html" style="margin: 0">
            更换账号实名认证的方法
            <img
              src="https://image.oppo.com/content/dam/heytap-brand/assets/service/arrow.png"
              alt=""
            />
          </a>
          <a href="二级菜单.html" style="margin: 0">
            账号的删除方法
            <img
              src="https://image.oppo.com/content/dam/heytap-brand/assets/service/arrow.png"
              alt=""
            />
          </a>
          <a href="二级菜单.html" style="margin: 0">
            修改账号绑定信息
            <img
              src="https://image.oppo.com/content/dam/heytap-brand/assets/service/arrow.png"
              alt=""
            />
          </a>
        </div>
        <div class="swiper-slide">
          <a href="二级菜单.html" style="margin: 0">
            云服务密码本的功能介绍
            <img
              src="https://image.oppo.com/content/dam/heytap-brand/assets/service/arrow.png"
              alt=""
            />
          </a>
          <a href="二级菜单.html" style="margin: 0">
            查找手机的使用条件
            <img
              src="https://image.oppo.com/content/dam/heytap-brand/assets/service/arrow.png"
              alt=""
            />
          </a>
          <a href="二级菜单.html" style="margin: 0">
            云服务的介绍
            <img
              src="https://image.oppo.com/content/dam/heytap-brand/assets/service/arrow.png"
              alt=""
            />
          </a>
          <a href="二级菜单.html" style="margin: 0">
            查找手机定位的使用方法
            <img
              src="https://image.oppo.com/content/dam/heytap-brand/assets/service/arrow.png"
              alt=""
            />
          </a>
          <a href="二级菜单.html" style="margin: 0">
            云服务备份微信数据的方法
            <img
              src="https://image.oppo.com/content/dam/heytap-brand/assets/service/arrow.png"
              alt=""
            />
          </a>
        </div>
        <div class="swiper-slide">
          <a href="二级菜单.html" style="margin: 0">
            积分商城物品物流查询方式
            <img
              src="https://image.oppo.com/content/dam/heytap-brand/assets/service/arrow.png"
              alt=""
            />
          </a>
          <a href="二级菜单.html" style="margin: 0">
            积分商城订单查询方法
            <img
              src="https://image.oppo.com/content/dam/heytap-brand/assets/service/arrow.png"
              alt=""
            />
          </a>
          <a href="二级菜单.html" style="margin: 0">
            积分商城物品的发货时间
            <img
              src="https://image.oppo.com/content/dam/heytap-brand/assets/service/arrow.png"
              alt=""
            />
          </a>
          <a href="二级菜单.html" style="margin: 0">
            积分商城兑换物品地址的修改方法
            <img
              src="https://image.oppo.com/content/dam/heytap-brand/assets/service/arrow.png"
              alt=""
            />
          </a>
          <a href="二级菜单.html" style="margin: 0">
            积分商城兑换礼品长时间未到货的处理方法
            <img
              src="https://image.oppo.com/content/dam/heytap-brand/assets/service/arrow.png"
              alt=""
            />
          </a>
        </div>
        <div class="swiper-slide">
          <a href="二级菜单.html" style="margin: 0">
            平台游戏防沉迷介绍
            <img
              src="https://image.oppo.com/content/dam/heytap-brand/assets/service/arrow.png"
              alt=""
            />
          </a>
          <a href="二级菜单.html" style="margin: 0">
            切换游戏账号的操作方法
            <img
              src="https://image.oppo.com/content/dam/heytap-brand/assets/service/arrow.png"
              alt=""
            />
          </a>
          <a href="二级菜单.html" style="margin: 0">
            游戏充值返利活动的查看方法
            <img
              src="https://image.oppo.com/content/dam/heytap-brand/assets/service/arrow.png"
              alt=""
            />
          </a>
          <a href="二级菜单.html" style="margin: 0">
            游戏无法正常登录的解决办法
            <img
              src="https://image.oppo.com/content/dam/heytap-brand/assets/service/arrow.png"
              alt=""
            />
          </a>
          <a href="二级菜单.html" style="margin: 0">
            能否取消防沉迷的游戏时间限制
            <img
              src="https://image.oppo.com/content/dam/heytap-brand/assets/service/arrow.png"
              alt=""
            />
          </a>
        </div>
        <div class="swiper-slide">
          <a href="二级菜单.html" style="margin: 0">
            借钱的额度说明
            <img
              src="https://image.oppo.com/content/dam/heytap-brand/assets/service/arrow.png"
              alt=""
            />
          </a>
          <a href="二级菜单.html" style="margin: 0">
            银行卡已扣款但还款失败的处理方法
            <img
              src="https://image.oppo.com/content/dam/heytap-brand/assets/service/arrow.png"
              alt=""
            />
          </a>
          <a href="二级菜单.html" style="margin: 0">
            申请结清证明
            <img
              src="https://image.oppo.com/content/dam/heytap-brand/assets/service/arrow.png"
              alt=""
            />
          </a>
          <a href="二级菜单.html" style="margin: 0">
            借钱的的放款时间
            <img
              src="https://image.oppo.com/content/dam/heytap-brand/assets/service/arrow.png"
              alt=""
            />
          </a>
          <a href="二级菜单.html" style="margin: 0">
            综合评分不足的原因
            <img
              src="https://image.oppo.com/content/dam/heytap-brand/assets/service/arrow.png"
              alt=""
            />
          </a>
        </div>
        <div class="swiper-slide">
          <a href="二级菜单.html" style="margin: 0">
            充值话费或流量未到账
            <img
              src="https://image.oppo.com/content/dam/heytap-brand/assets/service/arrow.png"
              alt=""
            />
          </a>
          <a href="二级菜单.html" style="margin: 0">
            公交卡刷卡失败
            <img
              src="https://image.oppo.com/content/dam/heytap-brand/assets/service/arrow.png"
              alt=""
            />
          </a>
          <a href="二级菜单.html" style="margin: 0">
            OPPO Pay开通异常的处理方法
            <img
              src="https://image.oppo.com/content/dam/heytap-brand/assets/service/arrow.png"
              alt=""
            />
          </p>
          <a href="二级菜单.html" style="margin: 0">
            门禁卡刷卡失败的处理方法
            <img
              src="https://image.oppo.com/content/dam/heytap-brand/assets/service/arrow.png"
              alt=""
            />
          </p>
          <a href="二级菜单.html" style="margin: 0">
            零钱提现失败的处理方法
            <img
              src="https://image.oppo.com/content/dam/heytap-brand/assets/service/arrow.png"
              alt=""
            />
          </a>
        </div>
      </div>
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
    </div>
    <h1>自助服务</h1>
    <article>
      <a href="登录.html">
        <img
          src="https://image.oppo.com/content/dam/heytap-brand/assets/service/group.png"
          alt=""
        />
        <span>账号密码</span>
      </a>
      <a href="登录.html">
        <img
          src="https://image.oppo.com/content/dam/heytap-brand/assets/service/tou.png"
          alt=""
        />
        <span>账号申诉</span>
      </a>
      <a href="登录.html">
        <img
          src="https://image.oppo.com/content/dam/heytap-brand/assets/service/bi.png"
          alt=""
        />
        <span>修改手机号</span>
      </a>
      <a href="登录.html">
        <img
          src="https://image.oppo.com/content/dam/heytap-brand/assets/service/live.png"
          alt=""
        />
        <span>账户注销</span>
      </a>
      <a href="登录.html">
        <img
          src="https://image.oppo.com/content/dam/heytap-brand/assets/service/map.png"
          alt=""
        />
        <span>查找手机</span>
      </a>
      <a href="登录.html">
        <img
          src="https://image.oppo.com/content/dam/heytap-brand/assets/service/yun.png"
          alt=""
        />
        <span>云空间数据管理</span>
      </a>
    </article>
    <h1>联系我们</h1>

    <aside>
      <div>
        <p>
          <img
            src="https://image.oppo.com/content/dam/heytap-brand/assets/service/frame.png"
            alt=""
          />
          在线服务
        </p>
        <span>在线解决您的问题，高效，便捷</span>
      </div>
      <div>
        <p>
          <img
            src="https://image.oppo.com/content/dam/heytap-brand/assets/service/tel.png"
            alt=""
          />
          电话客服
        </p>
        <span>4001999666</span>
      </div>
      <div>
        <p>
          <img
            src="https://image.oppo.com/content/dam/heytap-brand/assets/service/sms.png"
            alt=""
          />
          客服邮箱
        </p>
        <span>kf@heytap.com</span>
      </div>
      <div>
        <p style="text-align: end;">
          <img
            src="https://image.oppo.com/content/dam/heytap-brand/assets/service/wechat.png"
            alt=""
          />
          欢太客服微信公众号
        </p>
        <span>随时随地体验自助服务,尽享精彩资讯</span>
      </div>
    </aside>
    <div style="width: 100%;background-color: rgb(248,249,252);">
    <footer>
        <div class="left">
          <p>联系我们</p>
          <a href="客户服务.html">客户服务</a>
        </div>
        <div class="right">
          <p>法务信息</p>
          <a href="">侵权投诉政策</a>
          <a href="">隐私协议</a>
          <a href="">数据主体权利平台</a>
        </div>
        <span>©2021 HeyTap 版权所有 粤ICP备14012291号</span>
      </footer>
    </div>
    <input type="button" value="^" id="btn" />
    <script>
      let btn = document.querySelector("#btn");
      window.onscroll = function () {
        let scrollTop =
          document.documentElement.scrollTop || document.body.scrollTop;
        if (scrollTop >= 300) {
          btn.style.display = "block";
        } else {
          btn.style.display = "none";
        }
      };
      let timer = null;
      btn.onclick = function(){
          clearInterval(timer)

          timer = setInterval(() => {
              let iCur = document.documentElement.scrollTop || document.body.scrollTop;
              let iSpeed = -iCur/4;
              iSpeed = Math.floor(iSpeed)
              document.documentElement.scrollTop = document.body.scrollTop = iCur + iSpeed;
              if(iCur == 0){
                  clearInterval(timer)
              }
          }, 20);
      }
    </script>
    <!-- Swiper JS -->
    <script src="../js/客户服务.js"></script>

    <!-- Initialize Swiper -->
    <script>
      var swiper = new Swiper(".mySwiper", {
        spaceBetween: 10,
        slidesPerView: 4,
        freeMode: true,
        watchSlidesProgress: true,
      });
      var swiper2 = new Swiper(".mySwiper2", {
        spaceBetween: 10,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        thumbs: {
          swiper: swiper,
        },
      });
    </script>
  </body>
</html>
